<template>
	<view>
		<nav-bar-sub></nav-bar-sub>
		<!-- -------------------------- -->
		<view class="storeQuesItem" v-for="(item,index) in bankQues">
			<view class="storeQuesContent">
				<view class="quesType">{{item.queTypeName}}</view>
				<view class="quesProgress">
					<view class="">
						共<span>{{item.queCount}}</span>题
						已练<span>{{item.totalExerciseQue}}</span>题
					</view>
					<view class="">
						<u-line-progress class="lineProgress" active-color="#007FD1" :percent="Math.round(item.exercisePecent)"
							:striped="true" :striped-active="true"></u-line-progress>
					</view>
				</view>
				<view class="btnArea">
					<u-button size="mini" shape="circle"
						@click="startExecise(storeId,item.queType,item.exercisePecent)">开始练习</u-button>
					<u-button size="mini" shape="circle" @click="resetExecise(item.queType, storeId)">重置题型</u-button>
				</view>

			</view>
			<view class="lineArea">
				<u-line class="u-line" color="#999999" length="94%"></u-line>
			</view>
		</view>
		<!-- ---------------------- -->
	</view>
</template>

<script>

</script>
<script>
	export default {
		data() {
			return {
				bankQues: [],
				storeId: ''
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
			var that = this
			this.$api.getBankQues(option.storeId)
				.then(res => {
					console.log(res);
					this.bankQues = res.values.records
				})
		},
		methods: {
			startExecise(storeId, queType, exercisePecent) {
				if (exercisePecent >= 100) {
					uni.showToast({
						title: '已无更多题目',
						duration: 2000,
						image: '../../static/error.png'
					});
				} else {
					this.$u.route('/pages/exam/pracBankPage', {
						storeId: storeId,
						queType: queType, // 0表示考试
						examType: 'store',
					})
				}
			},
			resetExecise(queType, storeId) {
				var that =this
				this.$api.resetExecise(queType, storeId)
					.then(res => {
						console.log('进入题库', res);
						// this.bankQues = res.values.records
						uni.showToast({
							title: '重置成功',
							duration: 2000
						});
						uni.navigateBack({
							delta: 0,
						});
						// that.$forceUpdate()
					})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;

		.storeQuesItem {
			.storeQuesContent {
				// padding: 10rpx;
				margin: 15rpx 30rpx;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.quesType {
					font-weight: bold;
					font-size: 34rpx;
				}

				.quesProgress {
					letter-spacing: 0.1em;

					span {
						color: $theme-color;
						font-weight: bold;
					}
				}

				.btnArea {
					display: flex;
					flex-direction: column;
				}
			}

			.lineArea {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
</style>
